<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .marquee {
      overflow: hidden;
    }
    .list {
      flex-shrink: 0;
      background: red;
    }
    .list:first-child {
      background: red;
    }
    .list:nth-child(2) {
      background: green;
    }
    .list:nth-child(3) {
      background: blue;
    }
    .content {
      display: flex;
    }
    
  </style>
</head>
<body>
  <!-- <marquee behavior="" direction="">Deprecated</marquee> -->
  <div class="marquee">
    <div class="content">
      <div class="list"></div>
      <div class="list"></div>
      <div class="list"></div>
    </div>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(() => {
      console.log('页面元素加载完')

      let outerWidth = 200, outerHeight = 100, speed = 2;

      let $marquee = $('.marquee');
      let $content = $marquee.find('.content');
      let $list = $content.find('.list');
      let listLength = $list.length;
      let contentWidth = outerWidth * listLength;
      
      let style = document.styleSheets
      $marquee.css({
        "width": `${outerWidth}px`,
        "height": `${outerHeight}px`,
      })
      $list.css({
        "width": `${outerWidth}px`,
        "height": `${outerHeight}px`,
      })
      $content.css({
        "width": `${contentWidth}px`,
        "height": `${outerHeight}px`,
        "animation": `run ${speed*listLength}s linear infinite`
        // "animation": `run ${speed*listLength}s steps(2) infinite`
      })

      style[0].insertRule(
        `
        @keyframes run {
          // 0% {
          //   transform: translateX(-${outerWidth}px);
          // }
          100% {
            transform: translateX(-${contentWidth}px);
          }
        }
        `
      )

      var clone = $list.eq(0).clone()
      $content.append(clone)
    })
  </script>
</body>
</html>